<!DOCTYPE html>
<html>
	<head>
		<meta charset="ISO-8859-1">
		<title>How to play</title>
		<meta name="viewport" content="width=device-width">
		<link rel="icon" type="image/ico" href="bullet.ico"/>
        <link rel="stylesheet" type="text/css" href="sass/style.css">
        <link rel="stylesheet" type="text/css" href="sass/styleHighscore.css">
        <link href="css/font-awesome-4.2.0/css/font-awesome.css" type="text/css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="sass/howToPlayStyle.css">
	</head>

	<body>
	
		<div id="container">
            <header>
                <div class="logo">
                </div>
                <div class="clearfix">
                </div>
                <div class="container-menu">
                    <div class="menu-button">Menu</div>
                    <ul class="menu">
                        <li >
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="play.html">Play</a>
                        </li>
                        <li>
                            <a href="howToPlay.html" id="content">How to Play</a>
                        </li>
                        <li>
                            <a href="highscore.html">Highscore</a>
                        </li>
                        <li>
                            <a href="profile.html">Profile</a>
                        </li>
                        <li>
                            <a href="register.html">Register</a>
                        </li>
                    </ul>
                </div>
            </header>
         
         
         	<section>
         	
         		<div id="howToPlay">
         		
         			<div id="htpContent">
         			
         				<h1>HOW TO PLAY</h1>
         				
         				<div id="leftTopHTP" class="monkey">
         					<h3>Goal</h3>
         					<p>Kill the enemyes before they kill you. <br> By killing them you earn points and money.
         						<br> With the money you can buy new weapons.
         						<br>
         					<h3>Bonus</h3>
         					You will earn a bonus money and points, if in every next shoot kill next enemy.
         				</div>
         				
         				<div id="rightTopHTP" class="monkey">
         					<h3>Controls</h3>
         					<img src="images/mouse.png" id="mouse">
         					<img src="images/space.png" id="space">
         					<br>
         					<h4>Left click - shoot</h4> <h4>space - reload</h4>
         				</div>
         				
         				<div id="leftBotHTP" class="monkey">
         					<h3>Guns</h3>
         					<p>You can unlock new guns by buying them with the money you earned in the previous games.</p>
         					<ul>
         						<li>Pistol</li>
         						<li>AK47</li>
         						<li>Uzi</li>
         					</ul>
         				</div>
         				
         				<div id="rightBotHTP" class="monkey">
         					<h3>More</h3>
         					You can change weapons at the beginning of each level.<br> The more accurate you are the more points you will gain.
         					
         				</div>
         			
         			</div>
         		
         		</div>
         	
         	</section>
         
         
         	<footer>
                <ul class="footer-nav">
                   <li>
                        <a href="http://www.1001freefonts.com/you_murderer.font">Text fonts</a>
                    </li>
                    <li>
                        <a href="http://css-tricks.com/centering-css-complete-guide/">CSS Tricks</a>
                    </li>
                    <li>
                        <a href="http://www.w3.org/community/webed/wiki/CSS_shorthand_reference">W3C</a>
                    </li>
                </ul>
                <ul class="footer-nav">
                    <li>
                        <a href="http://www.w3schools.com/">W3schools</a>
                    </li>
                    <li>
                        <a href="http://jlongster.com/Making-Sprite-based-Games-with-Canvas">Sample games</a>
                    </li>
                    <li>
                        <a href="http://stackoverflow.com/questions/">Stackoverflow</a>
                    </li>
                </ul>
            </footer>
         
         
         </div>
      
	</body>
</html>